<template>
  <div id="login">
    <el-form ref="form" :model="sizeForm" label-width="90px" size="mini">
      <el-form-item label="数据库类型">
        <el-select v-model="type" placeholder="请选择类型">
          <el-option label="MYSQL" value="mysql"></el-option>
          <el-option label="无(使用本地储存)" value="local"></el-option>
        </el-select>
        <div style="display:inline">
            <i style="margin-left:50px" class="el-icon-more"></i>
            <i style="margin-left:50px" class="el-icon-s-tools"></i>
        </div>
      </el-form-item>
      <el-form-item label="数据库名">
        <el-input v-model="sizeForm.database" placeholder="可不填"></el-input>
      </el-form-item>
      <el-form-item label="数据库地址">
        <el-input v-model="sizeForm.host"></el-input>
      </el-form-item>
      <el-form-item label="端口">
        <el-input v-model="sizeForm.port"></el-input>
      </el-form-item>
      <el-form-item label="用户名">
        <el-input v-model="sizeForm.user" placeholder="root"></el-input>
      </el-form-item>
      <el-form-item label="密码">
        <el-input v-model="sizeForm.password" type="password"></el-input>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import mysql from "@/utils/data/mysql.js"

export default {
  name: "login",
  data() {
    return {
      sizeForm: {
        database: "",
        host: "",
        user: "",
        port : "",
        password: ""
      },
      type: '',
    };
  },
  mounted(){
    let db = this.$db.get('dataBase').find({type : 'mysql'}).value();
    if(db){
        this.sizeForm = db.config;
        this.type = db.type;
    }
  },
  methods: {
    onSubmit() {
      console.log("submit!");
    },
    testDB(){
      console.log(mysql.config);
      let sql = "SELECT table_name name,TABLE_COMMENT value FROM INFORMATION_SCHEMA.TABLES WHERE table_type='base table' and table_schema = 'hcloud' order by table_name asc"
      mysql.exec({
        sql : sql
      },(res)=>{
        if(res){
          this.$message({
            message: "连接成功！",
            type: "success",
            center: true
          });
        }else{
         this.$message.error("连接失败！");
        }
      });
    }
  },
};
</script>

<style>
</style>